<template>
    <div>
        <el-dialog v-model="props.visible" title="选择纸张" width="70%" @close="handleCancel">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="纸张编码" prop="code">
                    <el-input
                        v-model.trim="queryParams.code"
                        placeholder="请输入纸张编码"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <!-- <el-form-item label="自有编码" prop="originalCode">
                    <el-input
                        v-model.trim="queryParams.originalCode"
                        placeholder="请输入自有编码"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item> -->
                <el-form-item label="纸张名称" prop="name">
                    <el-input
                        v-model.trim="queryParams.name"
                        placeholder="请输入纸张名称"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="定量" prop="weight">
                    <el-input
                        v-model.trim="queryParams.weight"
                        type="number"
                        placeholder="请输入定量"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="品牌" prop="brand">
                    <el-select
                        @keyup.enter="handleQuery"
                        v-model="queryParams.brand"
                        class="m-2"
                        placeholder="请选择纸张品牌"
                    >
                        <el-option
                            v-for="item in mes_paper_brand"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <el-button
                style="margin-bottom: 5px"
                type="primary"
                plain
                @click="handleSubmit"
                :disabled="multiple"
            >
                确认
            </el-button>
            <el-table
                ref="paper"
                v-loading="loading"
                :data="paperList"
                stripe
                border
                row-key="id"
                style="cursor: pointer"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column label="序号" width="80" type="index" align="center" /> -->
                <el-table-column
                    type="selection"
                    :reserve-selection="true"
                    align="center"
                    width="55"
                />
                <el-table-column
                    label="纸张编码"
                    min-width="120"
                    align="center"
                    prop="code"
                ></el-table-column>
                <!-- <el-table-column
                    label="自有编码"
                    align="center"
                    :show-overflow-tooltip="true"
                    prop="originalCode"
                >
                </el-table-column> -->
                <el-table-column
                    label="纸张名称"
                    align="center"
                    min-width="100"
                    prop="name"
                ></el-table-column>
                <!-- <el-table-column
                    label="纸张全称"
                    align="center"
                    min-width="120"
                    prop="fullName"
                >
                </el-table-column> -->
                <!-- <el-table-column label="定量" align="center" prop="weight" /> -->
                <!-- <el-table-column label="规格型号" align="center" prop="specs">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />
                    </template>
                </el-table-column> -->
                <el-table-column label="纸张品牌" align="center" prop="brand">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_brand" :value="scope.row.brand" />
                    </template>
                </el-table-column>
                <el-table-column label="每件/令数" align="center" prop="pieceOrder" />
                <!-- <el-table-column label="计量单位" align="center" prop="unit">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_unit" :value="scope.row.unit" />
                    </template>
                </el-table-column> -->
                <el-table-column label="客/厂料" align="center" prop="material">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_material" :value="scope.row.material" />
                    </template>
                </el-table-column>
                <el-table-column label="类型" align="center" prop="packageType">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_package" :value="scope.row.packageType" />
                    </template>
                </el-table-column>
                <el-table-column label="纸型" align="center" prop="paperType">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_type" :value="scope.row.paperType" />
                    </template>
                </el-table-column>
                <el-table-column label="幅宽(mm)" align="center" prop="longWide" />
                <el-table-column v-if="count" label="库存数量" align="center" prop="quantity" />
                <!-- <el-table-column label="宽度(mm)" align="center" prop="wide" /> -->
                <!-- <el-table-column label="高度(mm)" align="center" prop="height" /> -->
                <!-- <el-table-column fixed="right" label="库存数量" align="center" prop="quantity" /> -->
            </el-table>
            <div class="footer">
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
const emit = defineEmits(['changeUpdate'])
import { listPaper } from '@/api/basicInfo/paperCoding.js'
import { nextTick } from 'vue'
const { proxy } = getCurrentInstance()
const {
    mes_paper_brand,
    mes_paper_unit,
    mes_paper_material,
    mes_paper_package,
    mes_paper_type,
    mes_paper_specs,
} = proxy.useDict(
    'mes_paper_brand',
    'mes_paper_unit',
    'mes_paper_material',
    'mes_paper_package',
    'mes_paper_type',
    'mes_paper_specs'
)

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    count: {
        type: Boolean,
        default: false,
    },
    search: {
        type: Object,
        default: () => {
            {
            }
        },
    },
    paperSelectList: {
        type: Array,
        default: () => {
            ;[]
        },
    },
})

const paperList = ref([])
const multiple = ref(true)
const selectRow = ref([])
const loading = ref(false)
const paper = ref(null)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    status: 0,
})
const total = ref(0)
watch(
    () => props.visible,
    val => {
        if (val) {
            handleQuery()
            nextTick(() => {
                paper.value.clearSelection()
                if (props.paperSelectList.length > 0) {
                    props.paperSelectList.forEach(item => {
                        paper.value.toggleRowSelection(item, true)
                    })
                }
            })
        }
    }
)
// watch(() => props.paperSelectList, (val) => {
//     nextTick(() => {
//         paper.value.clearSelection()
//         if (val.length > 0) {
//             val.forEach(item => {
//                 paper.value.toggleRowSelection(item, true)
//             })
//         }
//     })
// })
// 选中
const handleSelectionChange = row => {
    row.forEach(item => {
        item.lnumber=item.pieceOrder
        item.total = Number(item.quantity)
    })
    selectRow.value = row
    multiple.value = !row.length
}
const handleSubmit = () => {
    emit('changeUpdate', selectRow.value)
}

const handleCancel = () => {
    proxy.resetForm('queryRef')
    emit('cancel')
}

// 合计
const getSummaries = param => {
    const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计'
            return
        }
        switch (column.property) {
            case 'outboundNumber':
                sums[index] = outboundNumberSum.value
                break
            default:
                break
        }
    })
    return sums
}

const getList = async () => {
    loading.value = true
    if (props.search) {
        queryParams.value = { ...queryParams.value, ...props.search }
    }
    const res = await listPaper(queryParams.value)
    loading.value = false
    paperList.value = res.rows
    total.value = res.total
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm('queryRef')
    handleQuery()
}
// getList()
</script>

<style lang="scss" scoped></style>
